<template>
  <div>
    <el-card class="bigCard">
      <!-- 头部 -->
      <el-row slot="header" type="flex" justify="space-between">
        <div>
          <el-button type="primary" @click="addProperty">添加房产</el-button>
        </div>
        <el-row type="flex">
          <el-select v-model="categoryvalue" placeholder="全部分类" @change="screening">
            <el-option label="全部分类" value="">全部分类</el-option>
            <el-option v-for="item in categoriesList" :key="item.id" :label="item.title" :value="item.id" />
          </el-select>
          <el-select v-model="agentvalue" placeholder="全部经纪" @change="screening">
            <el-option label="全部经纪" value="">全部经纪</el-option>
            <el-option v-for="item in agentsList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <el-input v-model="input" placeholder="请输入内容" clearable />
          <el-button @click="screening">筛选</el-button>
        </el-row>
      </el-row>

      <!-- 身体 表格部分 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="image" label="封面">
          <template v-slot="{ row }">
            <img :src="row.image" alt="" width="100%" />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="110" />
        <el-table-column prop="tags" label="标签" width="100">
          <template v-slot="{ row }">
            <el-tag v-for="item in row.tags" :key="item" type="success">{{ item }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="category" label="分类" width="70">
          <template v-slot="{ row }">
            {{ row.category.title }}
          </template>
        </el-table-column>
        <el-table-column prop="agent" label="经纪" width="100">
          <template v-slot="{ row }">
            {{ row.agent.name }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="70" />
        <el-table-column prop="desc" label="介绍" />
        <el-table-column prop="photos" label="图片">
          <template v-slot="{ row }">
            <img v-for="item in row.photos" :key="item" :src="item" alt="" width="100%" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="primary" size="mini" @click="editPropertyFn(row.id)">编辑</el-button>
            <el-button type="danger" size="mini" @click="delProperty(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <!-- <el-row type="flex" justify="center">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageControl._limit"
          :total="total"
          @current-change="changePage"
        />
      </el-row> -->
      <MyPagination :page-size="pageControl._limit" :total="total" @getStart="getStart" />
    </el-card>

    <!-- 房产表单 -->
    <PropertyForm
      ref="propertyform"
      :dialog-visible="dialogVisible"
      :categories-list="categoriesList"
      :agents-list="agentsList"
      :property-id="propertyId"
      @closeFn="closeFn"
      @getProperty="getProperty"
    />
  </div>
</template>

<script>
import { getPropertyList, delProperty, getTotal } from '@/api/property'
import { getCategories } from '@/api/category'
import { getAgentsList } from '@/api/agents'
import PropertyForm from './components/propertyForm.vue'

export default {
  // 组件
  components: { PropertyForm },

  // 数据
  data() {
    return {
      // 搜索框的值
      input: '',
      tableData: [],
      // 分类列表
      categoriesList: [],
      // 经纪列表
      agentsList: [],
      // 控制弹窗
      dialogVisible: false,
      // 房产id
      propertyId: '',
      // 分类
      categoryvalue: '',
      // 经纪
      agentvalue: '',
      // 分页
      pageControl: {
        // 当前页最大条数
        _limit: 2,
        // 开始获取的位置
        _start: 0
      },
      // 房产数量总量
      total: 0
    }
  },

  // 计算属性
  computed: {
    // 获取房产列表的参数
    params() {
      const obj = {}
      // 分页参数
      obj._start = this.pageControl._start
      obj._limit = this.pageControl._limit
      // 筛选参数
      this.agentvalue && (obj.agent = this.agentvalue)
      this.categoryvalue && (obj.category = this.categoryvalue)
      this.input && (obj.title_contains = this.input)
      return obj
    }
  },

  // 钩子函数
  async created() {
    this.getPropertyList()
    this.getCategories()
    this.getAgentsList()
  },

  // 方法
  methods: {
    // 获取房产列表
    async getPropertyList() {
      const res = await getPropertyList({ ...this.params })
      this.tableData = res.data
      const totalParams = {}
      this.params.agent && (totalParams.agent = this.params.agent)
      this.params.title_contains && (totalParams.title_contains = this.params.title_contains)
      this.params.category && (totalParams.category = this.params.category)
      const a = await getTotal({ ...totalParams })
      this.total = a.data
    },
    // 分页改变
    // changePage(page) {
    //   this.pageControl._start = (page - 1) * this.pageControl._limit
    //   this.getPropertyList()
    // },
    getStart(start) {
      this.pageControl._start = start
      this.getPropertyList()
    },
    // 获取分类
    async getCategories() {
      const res = await getCategories()
      this.categoriesList = res.data
    },
    // 获取经纪
    async getAgentsList() {
      const res = await getAgentsList()
      this.agentsList = res.data
    },
    // 添加房产-弹窗显示
    addProperty() {
      this.dialogVisible = true
    },
    // 添加房产-关闭弹窗
    closeFn() {
      this.dialogVisible = false
    },
    // 更新房产
    getProperty() {
      this.getPropertyList()
    },
    // 删除房产
    async delProperty(id) {
      // 二次询问
      this.$confirm('是否删除该房产', '删除', {
        type: 'warning'
      })
        .then(async () => {
          await delProperty(id)
          this.getPropertyList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 编辑房产
    editPropertyFn(id) {
      this.dialogVisible = true
      this.propertyId = id.toString()
      this.$nextTick(() => {
        this.$refs.propertyform.getProperty()
      })
    },
    // 筛选分类/经纪/标题
    async screening() {
      this.pageControl._start = 0
      const res = this.getPropertyList()
      this.tableData = res.data
      this.$nextTick(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.el-card {
  margin: 20px;
  .el-row {
    .el-row {
      .el-dropdown {
        border: 1px solid #ddd;
        width: 150px;
        text-align: center;
        padding-top: 10px;
        color: #333;
      }
    }
  }
}

.el-dropdown-link {
  cursor: pointer;
  color: #8a8f97;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-tag + .el-tag {
  margin-left: 0;
}
</style>
